Use Z-index with absolute Positioning in HTML and CSS
Description
The following code shows how to use Z-index with absolute Positioning.
Example
<html>
<head>
<style type='text/css'>
p {<!-- w w w. ja v a2 s . c om-->
width: 200px;
background-color: #ffffff;
padding: 5px;
margin: 10px;
border-style: solid;
border-color: #000000;
border-width: 2px;
}
p.one {
z-index: 3;
position: absolute;
left: 0px;
top: 0px;
}
p.two {
z-index: 1;
position: absolute;
left: 150px;
top: 25px;
}
p.three {
z-index: 2;
position: absolute;
left: 40px;
top: 35px;
}
</style>
</head>
<body>
<div class="page">
<p class="one">
Here is paragraph <b>one</b>. This will be at the top of the page.
</p>
<p class="two">
Here is paragraph <b>two</b>. This will be underneath the other
elements.
</p>
<p class="three">
Here is paragraph <b>three</b>. This will be at the bottom of the
page.
</p>
</div>
</body>
</html>